<template>
  <div class="qualityManual-container">
    <!-- 头部添加关闭按钮 -->
    <el-button
      class="close-btn"
      @click="handleClose"
      icon="el-icon-close"
      circle
    />

    <div v-if="show" class="qualityManual-container-office">
      <vab-only-office :option="option" />
    </div>
  </div>
</template>
<script>
import vabOnlyOffice from "@/components/OnlyOfficeEditor";
import { getToken } from "@/utils/auth";
import axios from "axios";
export default {
  name: "Detail",
  components: {
    vabOnlyOffice,
  },
  props: {
    //   show: {
    //     type: Boolean,
    //     default: false,
    //   },
    file: {
      // immediate: true,
      // handler(newVal) {
      //   if (newVal && newVal.filePath) {
      //     this.loadOnlyOffice();
      //   }
      // },

      type: Object,
      required: true,
      default: () => ({}),
      validator: (value) => {
        return value.filePath && value.id; // 确保必要字段存在
      },
    },
  },
  data() {
    return {
      //参考OnlyOfficeEditor组件参数配置
      option: {
        url: "",
        isEdit: true,
        fileType: "",
        title: "",
        lang: "zh-CN",
        isPrint: true,
        user: {
          id: this.$store.state.user.id,
          name: this.$store.state.user.name,
        },
      },
      show: false,
    };
  },
  created() {
    this.loadOnlyOffice();
  },
  watch: {
    file: {
      immediate: true,
      handler(newVal) {
        if (newVal.filePath) {
          this.loadOnlyOffice();
        }
      },
    },
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },

    loadOnlyOffice() {
      console.log("loadOnlyOffice");
      var file = this.file;
      console.log("file", file);
      const parts = (file?.label || "").split(".");
      console.log("parts", parts);
      const type = this.getFileType(
        parts.length > 0 ? parts[parts.length - 1] : "unknown"
      );
      console.log(type);
      this.option.name = file.label;
      this.option.id = file.id;
      this.option.title = file.label;
      this.option.url = file.filePath;

      this.option.fileType = type;
      this.option.type = parts[parts.length - 1];
      console.log("file.filePath", file.filePath);
      console.log("this.option", this.option);
      this.show = true;
    },
    getFileType(fileType) {
      let docType = "";
      let fileTypesDoc = [
        "doc",
        "docm",
        "docx",
        "dot",
        "dotm",
        "dotx",
        "epub",
        "fodt",
        "htm",
        "html",
        "mht",
        "odt",
        "ott",
        "pdf",
        "rtf",
        "txt",
        "djvu",
        "xps",
      ];
      let fileTypesCsv = [
        "csv",
        "fods",
        "ods",
        "ots",
        "xls",
        "xlsm",
        "xlsx",
        "xlt",
        "xltm",
        "xltx",
      ];
      let fileTypesPPt = [
        "fodp",
        "odp",
        "otp",
        "pot",
        "potm",
        "potx",
        "pps",
        "ppsm",
        "ppsx",
        "ppt",
        "pptm",
        "pptx",
      ];
      if (fileTypesDoc.includes(fileType)) {
        docType = "text";
      }
      if (fileTypesCsv.includes(fileType)) {
        docType = "spreadsheet";
      }
      if (fileTypesPPt.includes(fileType)) {
        docType = "presentation";
      }
      return docType;
    },
  },
  mounted() {
    console.log("Detail组件已挂载，接收到的文件:", this.file);
  },
  updated() {
    console.log("Detail组件已更新，最新文件:", this.file);
  },
};
</script>
<style>
.qualityManual-container {
  padding: 0 !important;
  height: 100%;
}

.qualityManual-container-office {
  width: 100%;
  height: calc(100% - 55px);
}

.close-btn {
  position: absolute;
  right: 35px;
  top: 15px;
  z-index: 1000;
}
</style>
